<template>
    <div class="pd-30">
        <div class="flex">
            <div class="flex-1">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="管理系统" name="first"></el-tab-pane>
                    <el-tab-pane label="服务商系统" name="second"></el-tab-pane>
                    <el-tab-pane label="合伙人系统" name="third"></el-tab-pane>
                    <el-tab-pane label="交付中心系统" name="fourth"></el-tab-pane>
                </el-tabs>
            </div>
            <el-button class="w-100 ml-30" type="primary" @click="addUser">添加</el-button>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="parentId" label="父级id">
            </el-table-column>
            <el-table-column prop="url" label="地址">
            </el-table-column>
            <el-table-column prop="beiZhu" label="备注">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <p v-if="row.status == 1">正常</p>
                    <p class="red" v-else>禁用</p>
                </template>
            </el-table-column>
            <el-table-column prop="platform" label="系统">
                <template #default="{ row }">
                    <p v-if="row.platform == 1">总部系统</p>
                    <p v-else-if="row.platform == 2">服务商系统</p>
                    <p v-else-if="row.platform == 3">合伙人系统</p>
                    <p v-else-if="row.platform == 4">交付中心系统</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="mini" type="success">设置上级</el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>

        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total" @current-change="sizeChange">
            </el-pagination>
        </div>



        <el-dialog :visible.sync="show" width="30%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">{{ type == 1 ? '新增' : '编辑' }}菜单</h4>
            </span>
            <div class="plr-30  scroll">
                <div class="flex_l">
                    <div class="w-80">菜单名称：</div>
                    <el-input class="w-350 ml-20" v-model="form.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">图标：</div>
                    <el-input class="w-350 ml-20" v-model="form.iconMini" placeholder="请输入elenentIcon名称"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">父级id：</div>
                    <el-input class="w-350 ml-20" v-model="form.parentId" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">序号：</div>
                    <el-input class="w-350 ml-20" v-model="form.sortNo" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">地址：</div>
                    <el-input class="w-350 ml-20" v-model="form.url" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">系统：</div>
                    <el-select class="w-350 ml-20" v-model="form.platform" placeholder="请选择" @change="changeJs">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-80">备注：</div>
                    <el-input class="w-350 ml-20" size="small" v-model="form.beiZhu" type="textarea"
                        placeholder="请输入"></el-input>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { cusMenuList,editcusMenu,addcusMenu,cusMenuremove } from '@/api/user'

export default {
    name: "Menu",
    data() {
        return {
            activeName: 'first',
            page:1,
            total:0,
            tableData:[],
            form:{
                beiZhu:'',
                iconMini:'',
                id:'',
                name:'',
                parentId:'',
                platform:'',
                sortNo:'',
                url:''
            },
            options1: [{
                value: '1',
                label: '管理系统'
            }, {
                value: '2',
                label: '服务商系统'
            }, {
                value: '3',
                label: '合伙人系统'
            }, {
                value: '4',
                label: '交付中心系统'
            }],
            show:false
        };
    },
    mounted(){
        this.init()
    },
    methods: {
        addUser() {
            for (var i in this.form) {
                this.form[i] = ''
            }
            this.show = true
            this.type = 1
        },
        init(){
            cusMenuList({
                pageNum:this.page,
                pageSize:10
            }).then(res=>{
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleClick(tab, event) {
            console.log(event);
        },
        submit() {
            console.log(this.form)
            if (this.form.platform != 1 && this.form.thirdName == '') {
                this.$message({
                    message: '请选择用户',
                    type: 'error'
                });
                return
            }
            var apiFunction = this.type == 1 ? addcusMenu : editcusMenu
            apiFunction(this.form).then(res => {
                if (res.code == 0) {
                    this.show = false
                    this.init()
                    this.$message({
                        message: this.type == 1 ? '添加成功' : '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },
        addUser(){
            for (var i in this.form) {
                this.form[i] = ''
            }
            this.show = true
            this.type = 1
        },
        sizeChange(e) {
            this.page = e
            this.init()
        },
        handleEdit(e,type){
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.form.id = type.id
            this.show = true
            this.type = 2
        },
        handleDelete(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                cusMenuremove({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.init()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
}
</script>

<style>
</style>